import React, { Component } from 'react'
// 用于定义global中的dispatch
import {connect } from 'dva'
// 定义自校验规则
import { email_reg, pwd_reg } from '../../utils/Regexp.js'
// 引入请求组件
import Request from '../../utils/Request'
import Icon from 'Assets/icon.png'
import style from './account.scss'
import { Form, Input, Button,Message } from 'antd';
// 调用connect方法
@connect()
class index extends Component {
  state = {
    email: ''
  }

  validatorForm = (rule, value, cllback) => {//自定义表单校验规则
    // console.log(rule)
    if (value && rule.pattern && !value.match(rule.pattern)) {
      cllback(rule.message)
    } else {
      cllback()
    }
  }
  handleSubmit = (e) => {//数据验证成功后回调事件
    e.preventDefault();
    this.props.form.validateFields((err, values) => {//提示错误,记录正确的值
      if(!err){//正确情况下发起请求
        const {email,pwd} = values;
       //  发起网络请求,把数据存入服务器
       Request('/user.json').then(res =>{
         if(res.status === 200 && res.data){
          //  console.log(res)
           const {data,status} = res;
           if(res && status === 200 && data){
             /**
              * -LbHFGWS7sQk_zqs:{email: "164591357@qq.com",pwd: "123456"}
              * 把返回的data下唯一的key是自己生成的要把key和值拆分,
              * 把value部分放入单独的数组中
              * 把获取到的数据存入global再存入locaStorage
              */
             let users =[]//把key和pwd推入
             for(const key in data){//data 整个返回的数据集合,key 每个唯一的键名
              // console.log(data[key])//{email: "164591357@qq.com", pwd: "123456"}
               users.push(
                 {...data[key],key}
                 )
             }
             
             /**
              * console.log(users)
              * 0: {email: "164591357@qq.com", pwd: "123456",key: "-LbHFGWS7sQk_zqs"}
              */
            // 匹配账号密码
            users = users.filter(user =>{
              return user.pwd === pwd && user.email === email;
            })
            // 判断users有内容
            if(users && users.length){
              // console.log(users[0])
              // 存储至本地防止刷新数据丢失
              // localStorage.setItem("user",JSON.stringify(users[0]))
              localStorage.setItem('email', users[0].email);
              localStorage.setItem('key', users[0].key);
              // 存储到model
              this.props.dispatch({
                type:"global/setUserInfo",
                payload:users[0]
              }).then(()=>{
                // 页面跳转
                this.props.history.push('/')
              })
            }else{
              Message.error('邮箱或密码错误,请重新输入')
            }
           }
         }
       })
       }
    })
  }
  render() {
    // from提供的方法,getFieldDecorator	用于和表单进行双向绑定 https://ant.design/components/form-cn/#components-form-demo-dynamic-rule
    const { getFieldDecorator } = this.props.form;
    return (
      <div className={style.account}>
        <img src={Icon} alt="logo图片" className={style.logo} />
        <Form className="account-form">
          <Form.Item label="邮箱">
            {/* getFieldDecorator 需要绑定的类型,对象,绑定哪个双向数据, */}
            {getFieldDecorator("email", {
              rules: [//rules为校验规则
                {
                  required: true,
                  message: '邮箱不能为空,请填写正确的邮箱!'
                },
                // {
                //   type:"email",
                //   message:'请输入正确的邮箱,如:164591357@qq.com'
                // }
                {
                  pattern: email_reg,//自定义校验规则
                  validator: this.validatorForm,//自定义校验（注意，callback 必须被调用）
                  message: '请输入正确的邮箱,如:164591357@qq.com'
                }
              ]
              // initialValue:this.state.email,//子节点的初始值
            })(<Input type="email" />)}

          </Form.Item>
          <Form.Item label="密码">
            {getFieldDecorator('pwd', {
              rules: [
                {
                  required: true,
                  message: '密码不能为空，请输入密码！'
                },
                {
                  pattern: pwd_reg,
                  validator: this.validatorForm,
                  message:
                    '请输入正确的密码格式：6-16位字母、数字或特殊字符 _-.'
                }
              ]
            })(
              <Input
                maxLength={16}
                type="password"
                placeholder="请输入6-16位字母、数字或特殊字符的密码"
              />
            )}
          </Form.Item>
          <Form.Item>
            <Button className="btn" type="primary" onClick={this.handleSubmit}>登录</Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
// 经过 Form.create 之后如果要拿到 ref，可以使用 rc-form 提供的 wrappedComponentRef
export default Form.create()(index)